<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>打赏技师</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
        html,
        body {
            background-color: #FFFFFF;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .main {
            background-color: white;
        }

        .top {
            padding: 15px 15px 0px;
        }
        /*头像部分*/

        .own_msg {
            display: flex;
        }

        .own_msg_name {
            flex: 5;
        }

        .own_msg_img {
            flex: 5;
        }

        .own_msg_name>div:nth-child(1) {
            color: #1B1B1B;
            font-size: 21px;
            font-weight: bold;
            padding-bottom: 12px;
        }

        .own_msg_name>div:nth-child(2) {
            color: #1B1B1B;
            font-size: 15px;
            font-weight: bold;
            padding-bottom: 24px;
        }

        .own_msg_name>div:nth-child(3) {
            width: 1.07rem;
            height: 0.053rem;
            background-color: #0A5AFA;
        }

        .own_mag_img>div {
            width: 1.626rem;
            height: 1.626rem;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }

        .own_mag_img>div img {
            width: 100%;
            height: 100%;
        }
        /*头像部分结束*/

        .number {
            padding: 24px 0px 0px;
            display: flex;
        }

        .number_u {
            flex: 6;
            display: flex;
        }

        .number_ul {
            flex: 4;
        }

        .number_o {
            margin-right: 12px;
        }

        .number_o>div:nth-child(1) {
            color: #1B1B1B;
            font-size: 18px;
            font-weight: bold;
        }

        .number_o>div:nth-child(1)>span {
            color: #1B1B1B;
            font-size: 13px;
            font-weight: bold;
        }

        .number_o>div:nth-child(2) {
            color: #1B1B1B;
            font-size: 15px;
            font-weight: bold;
        }

        .number_p {
            text-align: center;
        }

        .number_p>div:nth-child(1)>span {
            color: #1B1B1B;
            font-size: 15px;
            font-weight: bold;
        }

        .number_ul {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .number_ul>div:nth-child(1) {
            width: 0.67rem;
            height: 0.6rem;
            margin-right: 40px;
        }

        .number_ul>div:nth-child(1) img {
            width: 100%;
            height: 100%;
        }

        .number_ul>div:nth-child(2) {
            width: 0.67rem;
            height: 0.67rem;
        }

        .number_ul>div:nth-child(2) img {
            width: 100%;
            height: 100%;
        }
        /*中间内容*/

        .frame {
            background-image: url(../image/icon/dasjsbj@2x.png);
            background-size: cover;
            width: 100%;
            height: 5.2rem;
            border-radius: 5px;
            padding: 20px 10px 10px;
            margin-top: 13px;
        }

        .frame_top {
            display: flex;
        }

        .frame_top>div {
            flex: 5;
        }

        .frame_top>div>div:nth-child(1) {
            color: #FFFFFF;
            font-size: 15px;
            font-weight: 500;
        }

        .frame_top>div>span {
            color: #FFFFFF;
            font-size: 11px;
            font-weight: 500;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .frame_con {
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 191, 232, 0.4), rgba(77, 231, 254, 0.4));
            border-radius: 5px 5px 0px 0px;
            margin-top: 0.346rem;
        }

        .frame_con>div {
            display: flex;
        }

        .frame_con_date {
            flex: 2.5;
        }

        .frame_con_date>div:nth-child(1) {
            width: 2rem;
            height: 0.8rem;
            max-height: 100%;
            position: absolute;
            margin-top: 0.213rem;
        }

        .frame_con_date>div:nth-child(1)>img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .frame_con_date>div:nth-child(2)>div:nth-child(1) {
            color: #FFFFFF;
            font-size: 10px;
            font-weight: 500;
            margin: 0.107rem 0.133rem 0 0.4rem;
        }

        .frame_con_date>div:nth-child(2)>div:nth-child(2) {
            text-align: right;
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 500;
            margin: -0.107rem 0.693rem 0px 0;
        }

        .frame_con_song {
            flex: 7.5;
        }

        .frame_con_song>div {
            color: #FFFFFF;
            font-size: 14px;
            margin: 0.08rem 0.48rem 0 0.08rem;
        }

        .frame_bottom {
            display: flex;
            margin-top: 0.67rem;
            height: 45px;
        }

        .frame_bottom>div {
            width: 25%;
            text-align: center;
            margin-right: 5px;
        }

        .frame_bottom_list {
            background-color: white;
            /*padding:0.37rem 0.586rem;*/
        }

        .frame_bottom_act {
            background-color: #FDFFC5;
        }

        .frame_bottom_list-q {
            font-size: 13px;
            font-weight: 500;
            margin-right: 0px;
        }

        .frame_bottom_list>div {
            color: #0A5AFA;
            font-size: 12px;
            font-weight: 500;
            margin-top: 1px;
        }

        .j {
            color: #0A5AFA;
            font-size: 18px;
            font-weight: 500;
        }
        /*技师印象*/

        .activity {
            height: 120px;
            padding: 0.506rem 0;
        }

        .activity>div:nth-child(1) {
            display: flex;
        }

        .activity>div:nth-child(1)>div:nth-child(1) {
            display: flex;
            flex: 5;
            justify-content: flex-start;
        }

        .activity>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
            width: 4px;
            height: 17px;
            background-color: #0A5AFA;
        }

        .activity>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
            font-size: 16px;
            color: #1B1B1B;
            font-weight: 500;
            margin-left: 6px;
            line-height: 22px;
            margin-top: -2px;
        }

        .act_list {
            padding: 0.17rem 0;
            background-color: white;
            text-align: center;
        }

        .act_list>div:nth-child(2) {
            margin-top: 0.66rem;
        }

        .service-block {
            text-align: center;
        }

        .service-block>div {
            /* display: flex;*/
            text-align: center;
        }

        .service-block>div>div {
            flex: 3;
            text-align: center;
        }
        /*.act_list>div>div:nth-child(1){
		flex: 5;
		width:100%;
	}
	.act_list>div>div:nth-child(2){
		flex: 5;
		width:100%;
	}*/
        /*.act_list>div>div:nth-child(3){
		flex: 3.3;
		width:100%;
	}*/

        .act_list>div:nth-child(3) {
            color: #FF0000;
            font-size: 13px;
            text-align: center;
            margin-top: 0.68rem;
        }

        .service-block-btn {
            width: 120px;
            display: inline-block;
            background-color: #EEEEEE;
            color: #7D7D7D;
            border-radius: 5px;
            margin: 5px;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            width: 3.2rem;
            padding: 0.12rem 0.185rem;
        }

        .service-action {
            width: 120px;
            background-color: #0A5AFA;
            color: white;
            display: inline-block;
            border-radius: 5px;
            margin: 5px;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            width: 3.2rem;
            padding: 0.12rem 0.185rem;
        }

        .act_1 {
            width: 3.2rem;
            padding: 0.12rem 0.185rem;
        }
        /*.act_2{
		width:2.93rem;
		padding:0.12rem 0.2rem;
	}
	.act_3{
		width:2.8rem;
		padding:0.12rem 0.185rem;
	}*/
        /*文本域*/
        /*意见*/
        /*去掉文本框边框*/
        /*textarea{
		border: none;
		background-color: #EEEEEE;
		color:#BFBFBF;
		font-size: 15px;
		height:2rem;
	}*/

        .opinion {
            padding: 0.5rem 0rem 1rem;
            background-color: white;
        }

        textarea {
            background-color: white;
            border: 1px solid #DCDCDC;
            height: 1.33rem;
            font-size: 12px;
            color: #1B1B1B;
            padding: 5px 10px;
        }
        /*按钮*/

        .opinion-btn {
            padding: 0.4rem 1.4rem 0rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .opinion-btn>button {
            width: 6.4rem;
            background-color: #0A5AFA;
            color: white;
            border: none;
            font-size: 17px;
            font-weight: 500;
            height: 45px;
            line-height: 37px;
        }
        /*弹窗*/

        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 0px;
            background: url() 0 0 no-repeat;
            background-size: cover;
        }

        .demo {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .demo-bg {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 0;
            width: 100%;
            bottom ：0;
            height: 100%;
            /*filter:Alpha(opacity=50);*/
            background-color: rgba(0, 0, 0, 0.4);
            /*实现透明背景*/
            display: none;
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 259px;
        }

        .demo-txt {
            position: relative;
            z-index: 1;
            color: #000;
            background: white;
            width: 100%;
            height: 150px;
            display: none;
            border-radius: 5px;
        }

        .demo-txt p {
            font-size: 24px;
            font-weight: 700px;
            text-align: center;
            padding-top: 33px;
            color: #1B1B1B;
            padding-bottom: 15px;
        }

        .demo-txt a {
            display: block;
            font-size: 18px;
            font-weight: 700;
            color: #0A5AFA;
            text-align: center;
            margin: 0 auto;
            padding-top: 25px;
            border-top: 1px solid rgba(131, 131, 139, 0.1);
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="top" id="technicianMsg">
            <!--头像部分-->
            <!--<div class="own_msg">
                <div class="own_msg_name">
                    <div>张 三</div>
                    <div>工牌编号：008</div>
                    <div></div>
                </div>
                <div class="own_mag_img">
                    <div><img src="../image/icon/jishixiaoge@2x.png" alt="" /></div>
                </div>
            </div>-->
            <!--好评率-->
            <!--<div class="number">
                <div class="number_u">
                    <div class="number_o">
                        <div>96<span>%</span></div>
                        <div>准时率</div>
                    </div>
                    <div class="number_o">
                        <div>95<span>%</span></div>
                        <div>好评率</div>
                    </div>
                    <div class="number_o number_p">
                        <div>36<span>份</span></div>
                        <div>日均接单</div>
                    </div>
                </div>
                <div class="number_ul">
                    <div><img src="../image/icon/dsjs-SPEECH3@2x.png" alt="" /></div>
                    <div><img src="../image/icon/dianh-h@2x.png" alt="" /></div>
                </div>
            </div>-->
            <!--中间内容-->
            <!--<div class="frame">
                <div class="frame_top">
                    <div>
                        <div>打赏技师</div>
                    </div>
                    <div><span>打赏的金额将全额转给技师</span></div>
                </div>
                <div class="frame_con">
                    <div>
                        <div class="frame_con_date">
                            <div>
                                <img src="../image/icon/line.png" />
                            </div>
                            <div class="">
                                <div>11月</div>
                                <div>27</div>
                            </div>
                        </div>
                        <div class="frame_con_song">
                            <div>为您的爱车订单进行了服务，提前了2分钟 送达！</div>
                        </div>
                    </div>

                </div>
                <div class="frame_bottom">
                    <div class="frame_bottom_list" style="border-radius:10px 3px 3px 10px;">
                        <div>打赏</div>
                        <div>￥<span class="j">2.2</span></div>
                    </div>
                    <div class="frame_bottom_list frame_bottom_act" style="border-radius:3px">
                        <div>打赏</div>
                        <div>￥<span class="j">6.6</span></div>
                    </div>
                    <div class="frame_bottom_list" style="border-radius:3px">
                        <div>打赏</div>
                        <div>￥<span class="j">8.8</span></div>
                    </div>
                    <div class="frame_bottom_list" style="border-radius:3px 10px 10px 3px;">
                        <div>打赏</div>
                        <div>￥<span class="frame_bottom_list-q">其他金额</span></div>
                    </div>
                </div>
            </div>-->
            <!--优惠活动-->
            <!--<div class="activity">
                <div>
                    <div>
                        <div></div>
                        <div>技师印象</div>
                    </div>

                </div>
                <div class="act_list">
                    <div class="service-block">
                        <div>
                            <div class="service-block-btn service-action act_1">
                                <span>服务态度好 103</span>
                            </div>
                            <div class="service-block-btn act_1">
                                <span>穿戴工服  102</span>
                            </div>
                            <div class="service-block-btn act_1">
                                <span>及时接车  96</span>
                            </div>
                        </div>
                        <div>
                            <div class="service-block-btn act_1">
                                <span>维修技术好 86</span>
                            </div>
                            <div class="service-block-btn act_1">
                                <span>风雨无阻  65</span>
                            </div>
                            <div class="service-block-btn act_1">
                                <span>靠谱开车稳  99</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>-->
            <!--意见-->
            <!--<div class="opinion">
                <form action="save.php" method="post" id="form">
                    <textarea cols="10" rows="1" placeholder="输入您的评价"></textarea><br>
                </form>
                <div class="opinion-btn" tapmode onclick="openDialog()">
                    <button>提交</button>
                </div>-->
            <!--弹窗-->
            <!--<div class='demo'>
                    <div class='demo-bg'>
                        <div class='demo-txt' tapmode onclick="closeDialog()">
                            <p>打赏成功 !</p>
                            <a href="mine_2.html">返回首页</a>
                        </div>
                    </div>

                </div>
            </div>-->

        </div>
    </div>

</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script src="../script/template-web.js"></script>
<!--打赏技师数据模型-->
<script type="text/html" id="Msg">
    <!--头像部分-->

    <div class="own_msg">

        <div class="own_msg_name">

            <div>{{data.real_name}}</div>

            <div>工牌编号：{{data.job_number}}</div>
            <div></div>
        </div>
        <div class="own_mag_img">
            <div><img src="{{data.head_img}}" alt="" /></div>
        </div>
    </div>
    <!--好评率-->
    <div class="number">
        <div class="number_u">
            <!-- <div class="number_o">
                <div>96<span>%</span></div>
                <div>准时率</div>
            </div> -->
            <div class="number_o">
            	{{if total_score!=0}}
                <div>{{parse(data.score,data.total_score)}}<span>%</span></div>
                {{else}}
                <div>100<span>%</span></div>
                {{/if}}
                <div>好评率</div>
            </div>
            <div class="number_o number_p">
                <div>{{data.clean_orders_count}}<span>份</span></div>
                <div>累计接单</div>
            </div>
        </div>
        <div class="number_ul">
            <div><img src="../image/icon/dsjs-SPEECH3@2x.png" alt="" /></div>
            <div><img src="../image/icon/dianh-h@2x.png" alt="" /></div>
        </div>
    </div>
    <!--中间内容-->
    <div class="frame">
        <div class="frame_top">
            <div>
                <div>打赏技师</div>
            </div>
            <div><span>打赏的金额将全额转给技师</span></div>
        </div>
        <div class="frame_con">
            <div>
                <div class="frame_con_date">
                    <div>
                        <img src="../image/icon/line.png" />
                    </div>
                    <div class="">
                        <div>11月</div>
                        <div>27</div>
                    </div>
                </div>
                <div class="frame_con_song">
                    <div>为您的爱车订单进行了服务，提前了2分钟 送达！</div>
                </div>
            </div>

        </div>
        <div class="frame_bottom">
            <div class="frame_bottom_list" style="border-radius:10px 3px 3px 10px;">
                <div>打赏</div>
                <div>￥<span class="j">2.2</span></div>
            </div>
            <div class="frame_bottom_list frame_bottom_act" style="border-radius:3px">
                <div>打赏</div>
                <div>￥<span class="j">6.6</span></div>
            </div>
            <div class="frame_bottom_list" style="border-radius:3px">
                <div>打赏</div>
                <div>￥<span class="j">8.8</span></div>
            </div>
            <div class="frame_bottom_list" style="border-radius:3px 10px 10px 3px;">
                <div>打赏</div>
                <div>￥<span class="frame_bottom_list-q">其他金额</span></div>
            </div>
        </div>
    </div>
    <!--优惠活动-->
    <div class="activity">
        <div>
            <div>
                <div></div>
                <div>技师印象</div>
            </div>

        </div>
        <div class="act_lists">
            <div class="service-block">
                <div id="serviceBlock">
                    {{each data.impress as val i}}
                    {{if val.id=="1"}}
                    <div class="service-block-btn act_1" id="{{val.id}}" tapmode onclick="fnBtnSelected({{i}},{{val.id}})">
                        <span>{{val.name}} {{val.pivot.count}}</span>
                    </div>
                    {{else if val.id=="2"}}
                    <div class="service-block-btn act_1" id="{{val.id}}" tapmode onclick="fnBtnSelected({{i}},{{val.id}})">
                        <span>{{val.name}} {{val.pivot.count}}</span>
                    </div>
                    {{else if val.id=="3"}}
                    <div class="service-block-btn act_1" id="{{val.id}}" tapmode onclick="fnBtnSelected({{i}},{{val.id}})">
                        <span>{{val.name}} {{val.pivot.count}}</span>
                    </div>
                    {{else if val.id=="4"}}
                    <div class="service-block-btn act_1" id="{{val.id}}" tapmode onclick="fnBtnSelected({{i}},{{val.id}})">
                        <span>{{val.name}} {{val.pivot.count}}</span>
                    </div>
                    {{/if}}
                    {{/each}}

                </div>
            </div>
        </div>

    </div>
    <!--意见-->
    <div class="opinion">
        <form action="save.php" method="post" id="form">
            <!--分别是行数和列数-->
            <textarea cols="10" rows="1" placeholder="输入您的评价"></textarea><br>
        </form>
        <div class="opinion-btn" tapmode onclick="openDialog()">
            <button>提交</button>
        </div>
        <!--弹窗-->
        <div class='demo'>
            <div class='demo-bg'>
                <div class='demo-txt' tapmode onclick="closeDialog()">
                    <p>打赏成功 !</p>
                    <a href="mine_2.html">返回首页</a>
                </div>
            </div>

        </div>
    </div>

</script>
<script type="text/javascript">
    var tenBtn;
    var ids = [];
    apiready = function() {
        init();
        fnTechnicianMsg();

        evaluate = "";
        //通过标签获取  getElementsByTagName
        var obj = document.getElementsByName("username");
        for (var i = 0; i < obj.length; i++) {
            obj[i].onclick = function() {　　　　　　
                evaluate = this.innerText;
            }
        }
    };
    headInner({
        title: "",
        //headleft
        headl: '<a style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
        //headright
        headr: '<a style="color:white"></a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })

    //取百分比函数
    template.defaults.imports.parse = function(a, b) {
        return Math.ceil(a / b * 100)
    }

    //获取接单技师信息
    function fnTechnicianMsg() {
        BASE.MYajax({
            'pathName': 'order/getMaster', //请求路径
            'methods': 'get',
            'ajaxData': {
                values: {
                    orders_id: 1
                }
            },
            'method': headData //调用函数
        });
    }

    function headData(ret, err) {
        if (ret.code == 200) {
            console.log("及实际是实际" + JSON.stringify(ret))
            var html = template("Msg", ret);
            //渲染进页面中
            document.getElementById('technicianMsg').innerHTML = html;
        } else {
            reToast(ret, err)
        }
    }

    //选择打赏金额
    var Btnlist = document.getElementsByClassName('frame_bottom_list');
    for (var i = 0; i < Btnlist.length; i++) {
        Btnlist[i].addEventListener('click', function() {
            for (var i = 0; i < Btnlist.length; i++) {
                Btnlist[i].setAttribute('class', 'frame_bottom_list')
            }
            this.setAttribute('class', 'frame_bottom_list frame_bottom_act')
        })
    }
    //技师印象按钮切换
    function fnBtnSelected(index_, id) {
        var serviceBtn = document.getElementsByClassName("service-block-btn");
        var clas = serviceBtn[index_].getAttribute("class");
        if (clas.indexOf("service-action") != -1) {
            serviceBtn[index_].setAttribute('class', 'service-block-btn act_1');
        } else {
            serviceBtn[index_].setAttribute('class', "service-block-btn act_1 service-action");
        }
        var index = ids.indexOf(id);
        if (-1 != index) {
            ids.splice(index, 1);
        }
        ids.push(id)
    }
    function ServiceCompletion() {
        api.openWin({
            name: 'ServiceCompletion',
            url: '../html/ServiceCompletion.html'
        });
    }

    function onlinepayment() {
        api.openWin({
            name: 'online-payment',
            url: '../html/online-payment.html'
        });
    }
    //弹窗
    var demobg = document.querySelector(".demo-bg");
    var demotxt = document.querySelector(".demo-txt");

    function openDialog() {
        demotxt.style.display = "block";
        demobg.style.display = "block";
    }

    function closeDialog() {
        demotxt.style.display = "none";
        demobg.style.display = "none";
    }
</script>

</html>
